<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        position: relative;
        width: 500px;
        height: 10px;
        margin: 50px auto;
        background-color: green;
    }
    .bor{
        position: absolute;
        left: 0;
        top: -5px;
        height: 20px;
        width: 10px;
        background-color: red;
    }
    .box>.mask{
        position: absolute;
        left: 0;
        top: 0;
        height: 10px;
        background-color: red;
    }
    p{
        text-align: center;
        font-size: 30px;
        color: red;
    }
</style>
<body>
    <div class="box">
        <div class="bar"></div>
        <div class="mask"></div>
    </div>
    <p>已经走了</p>
</body>
<script>
    var box=document.querySelector('.box')
    var bor=document.querySelector('.bar')
    var mask=document.querySelector('.mask')
    //调用当前
    bar.onmousedown = function(event){
        //鼠标按下去不松手事件
        event = event || window.event
         
        // console.log(this.offsetLeft);
        var barLeft = this.offsetLeft
        // 获取按钮距离box的左边距离，this是事件的调用者现在赋值给barLeft
        var initLeft = event.clientX
          //鼠标移动事件
        document.onmousemove = function(event){
        //event事件源对象
            event = event || window.event
            // console.log(event.clientX);
            // console.log("bar.offsetLeft="+bar.offsetLeft);
            var moveX = event.clientX - initLeft + barLeft
            // event.clientX 
            if(moveX> box.offsetWidth - bar.offsetWidth ){
                moveX = box.offsetWidth - bar.offsetWidth
            }else if(moveX<0){
                moveX=0
            }
            mask.style.width =moveX  +'px'
            bar.style.left=moveX+'px'
            var percent = ((moveX / (box.offsetWidth - bar.offsetWidth))*100).toFixed(2)+'%'
 // 拖动过程中不选中文本
 window.getSelection()?window.getSelection().removeAllRanges():document.selection.empty();
            p.innerHTML = '已经走了'+percent;
        }
        // 鼠标松开事件
        document.onmouseup =function(){
            // 鼠标移动事件清除
            document.onmousemove = ""
        }
    }


</script>
</html>